<template>
    <el-dialog  v-model="visible" :close-on-click-modal="false" draggable width="90%">
        <el-row style="margin-top: -20px">
            <h1 class="my-heading">我的购物车</h1>
        </el-row>
<!--   查询条件     -->
        <el-row class="myContent">
            <el-form :model="queryForm" ref="dataFormRef" :inline="true">
                <el-form-item label="资料名称" prop="dataName" >
                    <el-input placeholder="请输入资料名称" v-model="queryForm.dataName" />
                </el-form-item>
                <el-form-item>
                    <el-button icon="search" type="primary" @click="getProtuct">查询</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
<!--   购物车商品     -->
        <div style="display: flex; flex-wrap: wrap; padding:0px 10px;">
            <el-card class="box" v-for="product in productList" :key="product.id">
                <el-checkbox-group v-model="checkList">
                   <el-checkbox :label="product.dataId" :value="product.dataId"  style="margin-right: 10px">选择</el-checkbox>
                </el-checkbox-group>
                <img v-if="product.onlyOfficeId==null" src="../../../assets/pic.png">
                <img v-if='product.onlyOfficeId' :src="officeUrl+product.onlyOfficeId">
               <div class="box1">
                   <div slot="header" class="clearfix">
                       <el-tooltip class="box-item" effect="light" :content="product.dataName+product.dataType" placement="bottom-end">
                           <el-text truncated>{{product.dataName}}{{product.dataType}}</el-text>
                       </el-tooltip>
                   </div>
                   <el-row>
                       <el-tooltip class="box-item" effect="light" :content="product.goodsDescribe" placement="bottom-end">
                           <el-text truncated>简介: {{product.goodsDescribe}}</el-text>
                       </el-tooltip>
                   </el-row>
                   <el-row>
                       <el-tooltip class="box-item" effect="light" :content="product.keyPoint" placement="bottom-end">
                           <el-text truncated>关键点: {{product.keyPoint}}</el-text>
                       </el-tooltip>
                   </el-row>
               </div>
            </el-card>
        </div>
        <div class="avue-crud__pagination">
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[12, 20, 50, 100]"
                    :page-size="pageSize"
                    :total="totalPage"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="selectAll">全选</el-button>
          <el-button type="danger" icon="delete" @click="deleteProduct">删除</el-button>
          <el-button type="warning" icon="Wallet" @click="centerDialogVisible=true">去结算</el-button>
        </span>
      </template>
<!--  结算弹框    -->
        <el-dialog v-model="centerDialogVisible" title="购买" width="350" align-center>
            <div style="width:70%;margin: auto auto">
                <el-row class="span1">
                    <span >购买商品需线下联系</span>
                </el-row>
                <el-row class="span2">
                    <span>销售:{{buyInfoList.name}}</span>
                </el-row>
                <el-row class="span2">
                    <span>联系方式:{{buyInfoList.phone}}</span>
                </el-row>
                <el-row class="span2">
                    <span>邮箱:{{buyInfoList.mail}}</span>
                </el-row>
                <el-row class="span2">
                    <img :src="officeUrl+buyInfoList.onlyOfficeId" style="height: 180px;width: 180px">
                </el-row>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="centerDialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </el-dialog>
</template>

<script setup lang="ts" name="SpkZlDataDialog">
import { useDict } from '/@/hooks/dict';
import {useMessage, useMessageBox} from "/@/hooks/message";
import {getObj, addObj, putObj, getShoppingCartList, deleteShoppingCart, buyInfo} from '/@/api/train/spkZlData'
import { rule } from '/@/utils/validate';
import {ref} from "vue";
import {office} from "/@/api/train/kszlFile";
import {delObjs} from "/@/api/train/ksglTranscript";
import {fetchList} from "/@/api/train/kszlTestQuestion";
const emit = defineEmits(['refresh']);
// 定义变量内容
const totalPage = ref(0);
const pageIndex = ref(1); // 假设第一页是1
const pageSize = ref(12); // 假设每页显示10条数据
const officeUrl = ref()
const dataFormRef = ref();
const checkList = ref([]);
const queryForm = ref({});
const buyInfoList = ref({})
const visible = ref(false)
const isAll = ref(false)
const loading = ref(false)
const centerDialogVisible = ref(false)
const productList = reactive([])
// 定义校验规则
const dataRules = ref({})
onMounted(()=>{

})
// 打开弹窗
const openDialog = (id: string) => {
    queryForm.value.goodsType = '0'
    buyInfo().then(res=>{
        buyInfoList.value = res.data.records[0]
    })
    checkList.value.length = 0
    office().then((res) => {
        officeUrl.value = res.data + '/downloadFile/';
    });
    getProtuct()
  visible.value = true
  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
};
// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    dataFormRef.value?.resetFields()
    getProtuct()
}
const getProtuct = async () =>{
    productList.length = 0
    try {
        const response = await getShoppingCartList({
            ...queryForm.value,
            current: pageIndex.value,
            size: pageSize.value
        });
        Object.assign(productList,response.data.records)
        totalPage.value = response.data.total;
    } catch (error) {
        console.error('Error fetching data:', error);
        // 在这里处理错误，例如显示错误消息给用户
    } finally {
    }
}
// 每页数
const  sizeChangeHandle = (val:number)=> {
    pageSize.value = val
    pageIndex.value = 1
    getProtuct()
}
// 当前页
const  currentChangeHandle =(val:number)=> {
    pageIndex.value = val
    getProtuct()
}
//全选
const selectAll=()=>{
    isAll.value = !isAll.value
    if(isAll.value){
        productList.forEach(item=>{
            checkList.value.push(item.dataId)
        })
    }else {
        checkList.value.length = 0
    }
}
//删除商品
const deleteProduct= async()=>{
    // console.log('checkList',checkList.value)
    try {
        await useMessageBox().confirm('此操作将永久删除');
    } catch {
        return;
    }
    try {
        await deleteShoppingCart(checkList.value);
        getProtuct();
        checkList.value = []
        useMessage().success('删除成功');
    } catch (err: any) {
        useMessage().error(err.msg);
    }
}
// 提交
// const onSubmit = async () => {
// 	const valid = await dataFormRef.value.validate().catch(() => {});
// 	if (!valid) return false;
// 	try {
//     loading.value = true;
// 		form.id ? await putObj(form) : await addObj(form);
// 		useMessage().success(form.id ? '修改成功' : '添加成功');
// 		visible.value = false;
// 		emit('refresh');
// 	} catch (err: any) {
// 		useMessage().error(err.msg);
// 	} finally {
//     loading.value = false;
//   }
// };
// 暴露变量
defineExpose({
  openDialog
});
</script>
<style lang="scss" scoped>
    .my-heading {
        color: black;
        font-weight: bold;
        font-size: 26px;
        margin-bottom: 10px;
    }
    .box{
        margin: 0px 20px 20px 0;
        width: 15%;
        height: 340px;
        position: relative;
    }
    .box1{
        height: 70px;
        width: 237px;
        position: absolute;
        bottom:10px
    }
    .myContent{
        margin: 0px 20px;
    }
    .el-checkbox-group{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px;
    }
    .span1{
        font-weight: bold;
        font-size: 16px;
        color: red;
        margin-bottom: 10px;
    }
    .span2{
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }
    img{
        height: 180px;
        margin: 0 auto;
    }
    .el-card{
        height: 330px;
    }
</style>